import { getChartByIdUsingGET } from '@/services/arong/chartController';
import { getUserByIdUsingGET } from '@/services/arong/userController';
import transferDate from '@/utils/dayUtils';
import type { DescriptionsProps } from 'antd';
import { Button, Card, Descriptions, message } from 'antd';
import ReactECharts from 'echarts-for-react';
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import DatailTableComponent from '../DetailTable'
import './styles.css';


/**
 * 添加图表页面
 * @constructor
 */
const MyChartDetailPage: React.FC = () => {

  const [ chartDetail, setChartDetail ] = useState<API.Chart>({ });
  const [ user, setUser ] = useState<API.User>({});
  const [option, setOption] = useState<any>();
  const [loading, setLoading] = useState<boolean>(false);
  const [submitting, setSubmitting] = useState<boolean>(false);
  const [visible, setVisible] = useState<boolean>(false);
  const [tableName, setTableName] = useState<any>();

  const handleOpenModal = () => {
    setVisible(true);
  };

  const handleCloseModal = () => {
    setVisible(false);
  };

  const id = useParams().id;


  const getDetail = async(id: any) => {
      const res = await getChartByIdUsingGET({
        id: id,
      })
      if(!res.data) {
        message.error("获取分析数据错误" + res.data);
      } else {
        setChartDetail(res.data);
        const json = JSON.parse(res.data.genChart ?? '');
        setOption(json);
        setTableName((res.data.userId || '') + (res.data.name || ''));
      }
  }

  const getChartUser = async() => {
    const id = chartDetail.userId;
    console.log(id);
    if (id) { // 判断 id 是否存在
        const res = await getUserByIdUsingGET({
          id: id,
        });
        if (!res.data) {
          message.error("创建图表用户已经注销" + res.message);
        } else {
          setUser(res.data);
        }
    } else {
      message.error("用户 ID 为空");
    }
  }

  const getChart = () => {
    setLoading(true);
    console.log(chartDetail.genChart);
    const json = JSON.parse(chartDetail.genChart ?? '');
    if(!json) {
      message.error('解析图表失败');
    } else {
        setOption(json);
    }
    setSubmitting(true);
    setLoading(false);
  }
 
  useEffect(() => {
      getDetail(id);
  }, [id])

  const detail: DescriptionsProps['items'] = [
    {
      key: 'name',
      label: '图表名称',
      children: chartDetail.name,
    },
    {
      key: 'userName',
      label: '创建者',
      children: chartDetail.userName,
    },
    {
      key: 'chartType',
      label: '图表类型',
      children: chartDetail.chartType,
    },
    {
      key: 'goal',
      label: '分析目标',
      children: chartDetail.goal,
    },
    {
      key: 'genChart',
      label: '图表可视化',
      children: submitting ? <ReactECharts option={option} style={{ width: '80%', height: '400px' }} /> : 
                            <Button onClick={getChart} type='primary' loading={loading}>查看图表详情</Button>,
    },
    {
      key: 'genResult',
      label: '分析结论',
      children: chartDetail.genResult,
    },
    {
      key: 'createTime',
      label: '创建时间',
      children: transferDate(chartDetail.createTime),
    },
    {
      key: 'updateTime',
      label: '更新时间',
      children: transferDate(chartDetail.updateTime),
    },

  ]

  return (
    <div>
      <Card  title="图表详情" extra={<a onClick={handleOpenModal}>详细数据</a>}>
          {visible && (<DatailTableComponent
          visible={visible}
          onCancel={handleCloseModal}
          props={tableName}
          />
          )}
        <Descriptions items={detail} column={1}/>
      </Card>
    </div>
  );
};



export default MyChartDetailPage;
